/*
The styles in this stylesheet only apply to resolutions 768px and up

CALCULATING DIMENSIONS:
----------------------
The layout is fluid. The sote wrapper (.col-full) has a fixed pixel max-width.
All subsequent dimensions are calculated based on that fixed pixel width, using the formula: target / context = result
Credit - http://www.alistapart.com/articles/fluidgrids/

-----
INDEX
-----

1. Global dropdown styles
2. Top Navigation
3. Main navigation dropdown menus
 -3.1 General dropdown menus
4. Containers & Columns
5. WOOCOMMERCE
-5.1 Messages
-5.2 Products
  -5.2.1 Single Product
-5.3 Cart
-5.4 Checkout
-5.5 Widgets
-5.6 Account
-5.7 Shortcodes
6. Footer widgets
7. IE Fixes

*/


/*----------------------*/

@import url(mixins.less);
@img_path: "../images";

/*----------------------*/


@media only screen and (min-width: 768px) {

	#wrapper  {
		padding: 0 2.618em;
		.borderbox();
		overflow-x: hidden;
	}

	blockquote {
		padding:1.618em;
	}

	/* 1. GLOBAL DROPDOWN STYLES (these are purely for the dropdown layout and you should only edit the width of the dropdowns) */
	ul.nav {
		position: relative;
		margin-bottom:0;
		li {
			position: relative;
			float: left;
			zoom:1;
			list-style: none;
			a {
				display: block;
				padding:.857em 1.387em;
			}
			&.parent { // Styles applied to all parent list items
				a {
					&:after {
						.iconafter;
						content: ";";
					}
				}
			}
		}
		/* LEVEL 2 */
		ul {
			width:15.379em;
			visibility: hidden;
			position: absolute;
			top:100%;
			left: 0;
			z-index: 9999;
			margin:0;
			li {
				float: none;
				a {
					width: 100%;
					//display: inline-block;
					display: block;
					.borderbox();
					&:after {
						content: "" !important;
					}
				}
				&.parent { // Styles applied to parent items in level 2
					a {
						&:after {
							display: inline-block;
							content: "]" !important;
							float: right;
						}
					}
				}
			}
		}
		/* LEVEL 3 */
		ul ul {
			left:100%;
			top:0;
			li {
				a {
					&:after {
						display: none !important;
					}
				}
				&.parent { // Styles applied to parent items in level 3

				}
			}
		}
		li:hover > ul {
			visibility: visible;
		}
	}

	/* 2. TOP NAVIGATION (Add top navigation presentational styles here) */
	#top {
		background: url("@{img_path}/noise.png"), url("@{img_path}/leather.png");
		background-color: darken(@color_body,10%);
		border-bottom:.146em dashed lighten(@color_body,5%);
		border-top:.327em solid darken(@color_body,20%);
		font-weight: 700;
		-webkit-box-shadow:
			0 .236em 0 darken(@color_body,15%),
			0 .382em 1em rgba(0,0,0,0.25),
			inset 0 -1px 0 darken(@color_body,15%);
		-moz-box-shadow:
			0 .236em 0 darken(@color_body,15%),
			0 .382em 1em rgba(0,0,0,0.25),
			inset 0 -1px 0 darken(@color_body,15%);
		box-shadow:
			0 .236em 0 darken(@color_body,15%),
			0 .382em 1em rgba(0,0,0,0.25),
			inset 0 -1px 0 darken(@color_body,15%);
		.lifted();
		margin: 0 -2.618em;
		padding:0 2.618em;
		#top-nav {
			display: block;
		}
		a {
			.text_shadow(0,-1px,0,@color_body - #333);
			color: @color_body + #444;
			&:hover {
				color: @color_links + #111;
			}
		}
		ul.nav {
			font-size:.857em; // this adjusts the scale of the entire navigation and everything just works like magic
			> li { // The following styles are applied ONLY to the top level list items
				a {
					&:hover {
						.vertical_gradient(@color_body,darken(@color_body,5%));
					}
				}
				&:hover {
					.vertical_gradient(@color_body,darken(@color_body,5%));
				}
				&.logout {
					a {
						&:after {
							.iconafter;
							content: "X";
						}
					}
				}
			}
			/* LEVEL 2 */
			ul {
				.vertical_gradient(darken(@color_body,5%),darken(@color_body,10%));
				.box_shadow(0,1em,1em,0,rgba(0,0,0,0.2));
				li {
					a {
					}
				}
			}
			/* LEVEL 3 */
			ul ul {
			}
			li:hover > ul {
			}
		}
	}

	/* 3. MAIN NAVIGATION DROPDOWN MENUS (Add main navigation presentational styles here) */
	#navigation  {
		display:block !important;
		ul.nav {
			padding:0;
			> li { // The following styles are applied ONLY to the top level list items
				border-right:1px dotted lighten(@border_main,5%);
				a {
					&:hover {
						background: #fff;
						.inset_box_shadow(0,.382em,0,0,@color_theme);
					}
				}
				&:hover, &.current_page_item {
					background: #fff;
					.inset_box_shadow(0,.382em,0,0,@color_theme);
				}
			}
			li {
				a {
					padding:1em 1.618em;
					color: @color_theme;
					&:hover {
						color: @color_theme - #444;
					}
				}
			}
			// The home link
			li.home {
				border: 0;
				a {
					border: .327em solid @color_theme - #222;
					padding:0;
					.borderbox();
					.border_radius_left(.236em);
					span {
						padding:.673em 1.618em;
						display: inline-block;
						.borderbox();
						border:1px dashed @color_theme + #333;
						background: url("@{img_path}/home.png") center no-repeat @color_theme;
						color:#fff;
						text-indent: -999em;
					}
					&:hover {
						-webkit-box-shadow:none !important;
						-moz-box-shadow:none !important;
						box-shadow:none !important;
						span {
							background-color: @color_theme - #111;
						}
					}
				}
				&:hover, &.current_page_item {
					a {
						-webkit-box-shadow:none !important;
						-moz-box-shadow:none !important;
						box-shadow:none !important;
					}
				}
			}
			/* LEVEL 2 */
			ul {
				background: #fff;
				padding:.618em 0;
				-webkit-box-shadow:
					inset 0 0 0 .382em rgba(255,255,255,0.6),
					0 1px 2px rgba(0,0,0,0.1),
					0 1em 2em rgba(0,0,0,0.1);
				-moz-box-shadow:
					inset 0 0 0 .382em rgba(255,255,255,0.6),
					0 1px 2px rgba(0,0,0,0.1),
					0 1em 2em rgba(0,0,0,0.1);
				box-shadow:
					inset 0 0 0 .382em rgba(255,255,255,0.6),
					0 1px 2px rgba(0,0,0,0.1),
					0 1em 2em rgba(0,0,0,0.1);
				li {
					a {
						&:hover {
							-webkit-box-shadow:none;
							-moz-box-shadow:none;
							box-shadow:none;
							background: none;
						}
					}
				}
			}
			/* LEVEL 3 */
			ul ul {
				left:100%;
				padding:0;
			}
			li:hover > ul {
			}
		}
	}
	// Hide the nav toggle link in desktop orientation
	h3.nav-toggle {
		display: none;
	}

	/* 4. CONTAINERS & COLUMNS */
	#main.fullwidth, .layout-full #main, .col-full {
		max-width:75.998em;
		margin:0 auto;
		width:100%;
	}
	#main {
		width: 65.4%; // golden ratio
	}
	#sidebar {
		margin-top: 0;
		width: 30.75%;  // golden ratio
	}
	.entry img {
		max-width: 100%;
	}
	.layout-full .entry img {
		max-width: 100%;
	}
	.layout-right-content {
		#main  {
			float: right;
		}
		#sidebar  {
			float: left;
		}
	}
	.layout-full #main, .woocommerce-fullwidth #main  {
		width: 100%; // full-width template
	}

	.col-left {
		float: left;
	}
	.col-right {
		float: right;
	}
	.page-template-template-contact-php {
		.location-twitter  {
			.col-left  {
				float: left;
			}
			#office-location {
			    width: 48%;
			    margin: 0;
			}
			.contact-social  {
			    float: right;
			    width: 48%;
			    #twitter  {
			    	margin: 0;
			    }
			}
		}
	}

	.post, .type-page {
		padding:3.631em;
		.woo-image:first-child {
			float:right;
			padding:.618em .618em 1.618em;
			background: #fff;
			border:0;
			.box_shadow(0,.077em,.146em, 0, rgba(0,0,0,0.15));
			.border_radius(.236em);
			.rotate(2deg);
			width:11.089em;
			margin-right:0;
			margin-left:1.618em;
		}
	}

	#post-author, #post-entries {
		padding:1.618em 3.631em;
	}

	.mini-features {

		.mini-feature {
			width:30.75%;
			margin-right:3.8%;
			float: left;
			font-size:0.8em;

			&:nth-child(3n) {
				margin-right:0;
			}
		}
	}

	// Header
	#header {
		.clearfix();
		text-align: left;
		#logo {
			margin-right:1em;
		}
		hgroup {
			float: left;
			margin-bottom:1.618em;
			.site-description {
				clear: left;
			}
		}
		a.cart-button, a.checkout {
			float: right;
		}
		a.checkout {
			display: inline-block;
		}
	}

	// Sidebar

	#sidebar {
		margin-bottom:2.618em;
	}

	.home {
		#sidebar {
			.tweet {
				ul {
					li {
						padding:1.618em;
					}
				}
			}
		}
	}

	// Comments

	#respond {
		#reply-title {
			small {
				float: right;
			}
		}
	}

	/* 5. WOOCOMMERCE */

	// Homepage

	.home-intro {
		.stand-first {
			width:46.2%;
			padding-left:3.8%;
			float: left;
			clear: left;
			z-index: 99999;
		}
	}

	ul.featured-products {
		margin:0 0 5.874em;
		z-index: 99;
		clear: both;
		padding-top:3.631em;
		li {
			width:20%;
			float: none;
			display: inline-block;
			vertical-align: top;
			clear: none;
			.borderbox();
			position: relative;
			word-spacing: 0;
			&:after {
				content: "";
				position: absolute;
				top:0;
				left:0;
				right:0;
				bottom:0;
				-webkit-box-shadow:
					0 0 0 2.618em fade(darken(@bg_light,14%),25%),
					0 0 1em rgba(0,0,0,0.1);
				z-index: -999999;
			}
			&:nth-child(4n), &.fourth {
				width:39.9%;
				margin-top:-20%;
			}
			&:nth-child(2n), &.second {
				float: none;
			}
			&:nth-child(5n), &.fifth {
				margin-left:20%;
			}
			img {
				width:100%;
				height: auto;
			}
			h3 {
				position: absolute;
				bottom:0;
				background: fade(@color_links,80%);
				border-bottom:.382em solid @color_links;
				color: #fff;
				margin:0;
				padding:.54em .857em;
				left:0;
				right:0;
				font-family: @sans_google;
				font-size:.857em;
				.transition();
				.price {
					.opacity(0.6);
					&:before {
						content: "\2014";
						display: inline-block;
						padding:0 .382em 0 .236em;
					}
				}
			}
			.onsale {
				position: absolute;
				top:0;
			}
			a {
				&:hover {
					h3 {
						//padding-bottom:1.387em;
						border-color:@color_theme;
						border-bottom-width:.857em;
						background: fade(@color_theme,85%);
					}
				}
			}
			&.go-shopping {
				position: relative;
				a {
					margin:40% 0 0 40%;
				}
				&:after {
					display: none;
				}
			}
		}
	}

	.col2-set {
		clear: both;
		.clearfix();

		.col-1 {
			width:48%;
			float: left;
		}

		.col-2 {
			width:48%;
			float: right;
		}
	}

	.form-row {
		width:48%;
		float: left;
		margin-bottom:2.053em;

		label {
			display: block;
			padding:.206em 0;
		}

		.input-text, select {
			width:100%;
			*width:90%;
			.borderbox();
		}

		input[type=checkbox] {
			float: left;
		}

		&.notes {
			width:100%;
			float: none;

			textarea {
				width:100%;
				*width:90%;
			}
		}

		&.notes + h3 {
			clear: both;
		}
	}

	.form-row-first {
		clear: left;
	}

	.form-row-last {
		float: right;
	}

	.form-row-wide {
		float: left;
		width:100%;
		clear: both;
	}

	header.title {
		overflow: hidden;
		zoom:1;

		h1, h2, h3, h4, h5 {
			float: left;
		}

		a.edit {
			float: right;
			font-weight: bold;
		}
	}
	/* 5.1 Messages */
	/* 5.2 Products */
	ul.products {
		.clearfix();
		li.product {
			width:30.75%;
			float: left;
			clear: none;
			margin-right:3.8%;
			&:nth-child(2n) {
				float: left;
				clear: none;
			}
			&.first {
				clear: left;
			}
		}
	}
	.post-type-archive-product {
		ul.products {
			&:hover {
				li.product {
					.img-wrap {
						.opacity(0.5);
						&:hover {
							.opacity(1);
							&:before {
								display: none;
							}
						}
					}
				}
			}
		}
	}
	.pagination-wrap {
		.woo-pagination, .woocommerce_ordering, .woocommerce-ordering {
			width:48%;
			float: left;
			text-align: left;
			padding:0;
		}
		.woocommerce_ordering, .woocommerce-ordering {
			float: right;
			text-align: right;
		}
	}
	/* 5.2.1 Single Product */
	.single-product {
		.images {
			width:30.75%;
			float: left;
			img {
				height: auto;
			}
		}
		.summary {
			width:65.4%;
			float: right;
			.price {
				font-family: @serif_google;
				color: @color_theme;
			}
		}
		.woocommerce_tabs, .woocommerce-tabs {
			clear: both;

			ul.tabs {
				width:29.75%;
				float: left;
				border-top:1px solid @bg_light - #111;
				li {
					display: block;
					margin-right:0;
					a {
						display: block;
						border-bottom:1px solid @bg_light - #111;
						padding:.618em 0;
					}
					&.active {
						a:after {
							.iconafter();
							content: ">";
							float: right;
							margin-right:.857em;
							margin-top:.202em;
						}
					}
				}
			}
			.panel {
				width:65.4%;
				padding-left:3.8%;
				border-left:1px solid @bg_light - #111;
				float: right;
				margin-bottom:1.618em;
				border-top:1px solid @bg_light - #111;
				padding-top:1.618em;

				p:last-child {
					margin-bottom:0;
				}

				&#tab-description {
					ul,ol {
						margin-left:1.618em;
					}
				}
				&#tab-reviews {
					position: relative;
					div[itemprop=aggregateRating] .star-rating:first-child {
						position: absolute;
						top:-1.618em;
						right:0;
						background-color: @bg_light - #111;
						.border_radius_bottom(.202em);
						border:.53em solid @bg_light - #111;
					}
				}
			}
		}
		.related, .upsells {
			clear: both;
		}
	}
	/* 5.3 Cart */
	table.cart {
		.product-remove, .product-thumbnail, .product-price {
			position: static;
		}

		td.actions {
			text-align: right;

			.coupon {
				width:50%;
				float: left;
			}

			.input-text, .button, .checkout-button {
				width:auto !important;
				display: inline-block;
				margin-bottom:0 !important;
			}
			.button {
				margin-left:.618em;
				float: none !important;
			}
		}
	}
	.cart-collaterals {
		.clearfix();

		.cross-sells, .cart_totals, .shipping_calculator {
			width:48%;
			font-size:.857em;
			float: left;
		}

		.cart_totals {
			float: right;
		}

		.shipping_calculator {
			float: right;
			clear: right;
		}
	}
	/* 5.4 Checkout */
	#customer_details {
		.col-1, .col-2 {
			background: fade(#fff,50%);
			border:1px solid @bg_light;
			padding:2.244em;
			.borderbox;
			margin-bottom:1.618em;
			width:49%;
		}
	}

	/* 5.5 Widgets */
	/* 5.6 Account */
	.woocommerce-account {
		form.login {
			.button {
				margin-right:1em;
			}
			.clear + .form-row {
				width:100%;
			}
		}
	}
	/* 5.7 Shortcodes */

	/* 6. FOOTER WIDGETS */
	#footer-widgets {
		.block {
			margin-right:3.8%;
			float: left;
		}
		&.col-1 {
			.block {
				width: 100%;
				float: none;
			}
			.footer-widget-1 {
				margin-right:0;
			}
		}
		&.col-2 {
			.block {
				width: 48%;
			}
			.footer-widget-2 {
				margin-right:0;
			}
		}
		&.col-3 {
			.block {
				width: 30.75%;
			}
			.footer-widget-3 {
				margin-right:0;
			}
		}
		&.col-4 {
			.block {
				width: 22.05%
			}
			.footer-widget-4 {
				margin-right:0;
			}
		}
	}

	/* 7. IE FIXES */

	.ie8 {
		ul.featured-products {
			li {
				h3 {
					background: @color_links;
				}
				&:hover {
					h3 {
						background: @color_theme;
					}
				}
			}
			li.fourth {
				width:40%;
				margin-top:-20%;
			}
			li.fifth {
				margin-left:20%;
			}
		}

	}

}

@media only screen and (min-width: 1600px) {
	body {
		font-size:1.6em;
	}
	#sidebar .widget {
		margin-bottom:1em;
	}
	ul.featured-products li:nth-child(4n), ul.featured-products li.fourth {
		width:40%;
	}
}